<template>
	<view class="edit">
		<view class="title">
			<input type="text" v-model="artData.title" placeholder="请输入完整的标题" placeholder-class="placeholderClass" />
		</view>
		<view class="content">
			<editor
				class="myEdit"
				placeholder="写点什么吧~~"
				show-img-resize
				show-img-toolbar
				show-img-size
				@ready="onEditReady"
				@focus="OnFocus"
				@statuschange="statuschange"
			></editor>
		</view>
		<view class="btnGroup">
			<u-button type="primary" text="确认发表" @click="onSubmit" :disabled="!artData.title"></u-button>
		</view>
		<view class="tools" v-show="toolsShow">
			<!-- 标题 -->
			<view class="item" @click="headChange">
				<text :class="headShow ? 'active' : ''">1111111111111</text>
			</view>
			<!-- 加粗 -->
			<view class="item" @click="boldChange">
				<text :class="boldShow ? 'active' : ''">2222222222222</text>
			</view>
			<!-- 斜体 -->
			<view class="item" @click="italicChange">
				<text class="iconfont icon-zitixieti" :class="italicShow ? 'active' : ''"></text>
			</view>
			<!-- 分割线 -->
			<view class="item" @click="insertDivider"><text>33333333333</text></view>
			<view class="item" @click="insertImage"><text class="iconfont icon-charutupian"></text></view>
			<!-- 完成 -->
			<view class="item" @click="editOk"><text>444444444444444</text></view>
		</view>
	</view>
</template>
 
<script>
export default {
	data() {
		return {
			toolsShow: false,
			editorContent: null,
			headShow: false,
			boldShow: false,
			italicShow: false,
			artData: {
				title: '',
				content: ''
			}
		};
	},
	methods: {
		// 初始化
		onEditReady() {
			// 查询节点信息的对象
			// 将选择器的选取范围更改为自定义组件 component 内，返回一个 SelectorQuery 对象实例。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。
			// 在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
			// 获取节点的相关信息。第一个参数是节点相关信息配置（必选）；第二参数是方法的回调函数，参数是指定的相关节点信息。
			// 执行所有的请求。请求结果按请求次序构成数组，在 callback 的第一个参数中返回。
			uni.createSelectorQuery()
				.in(this)
				.select('.myEdit')
				.fields(
					{
						size: true, //是否返回节点尺寸（width height）
						context: true //是否返回节点尺寸（width height）
					},
					(res) => {
						console.log(res);
						this.editorContent = res.context;
					}
				)
				.exec();
		},
		// 离开焦点
		OnFocus() {
			this.toolsShow = true;
		},
		// 添加分割线
		insertDivider() {
			this.editorContent.insertDivider();
		},
		// 添加大标题
		headChange() {
			this.headShow = !this.headShow;
			this.editorContent.format('header', this.headShow ? 'H2' : false);
		},
		// 加粗
		boldChange() {
			this.boldShow = !this.boldShow;
			this.editorContent.format('bold');
		},
		// 斜体
		italicChange() {
			this.italicShow = !this.italicShow;
			this.editorContent.format('italic');
		},
		// 用于检查对象detail是否包含名为name的属性
		checkStatus(name, detail, key) {
			if (detail.hasOwnProperty(name)) {
				this[key] = true;
			} else {
				this[key] = false;
			}
		},
		// 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式（解决标题标签回弹问题）
		statuschange(e) {
			let detail = e.detail;
			console.log(detail);
			this.checkStatus('header', detail, 'headShow');
			this.checkStatus('bold', detail, 'boldShow');
			this.checkStatus('italic', detail, 'italicShow');
		},
		// 添加图像
		insertImage() {
			// 打开相机
			uni.chooseImage({
				count: 3, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: async (res) => {
					let tempFiles = res.tempFiles;
					for (let item of tempFiles) {
						uni.showLoading({
							mask: true,
							title: '上传中...'
						});
						try {
							let res = await uniCloud.uploadFile({
								filePath: item.path, //要上传的文件对象
								cloudPath: item.name //cloudPath为云端文件名，
							});
							// 设置图片地址 图片地址，仅支持 http(s)、base64、本地图片
							this.editorContent.insertImage({
								src: res.fileID
							});
							uni.hideLoading();
						} catch (e) {
							uni.hideLoading();
							uni.showModal({
								content: '上传失败',
								title: '提示'
							});
						}
					}
				}
			});
		},
		// 确认
		editOk() {
			this.toolsShow = false;
		},
		onSubmit() {
			console.log(11);
			this.editorContent.getContents({
				success: (res) => {
					console.log(res);
					this.artData.content = res.html;
				}
			});
		}
	}
};
</script>
 
<style lang="scss">
/deep/ .ql-blank::before {
	font-style: normal;
	color: #e0e0e0;
}
 
.edit {
	padding: 30rpx;
	.title {
		input {
			height: 120rpx;
			font-size: 46rpx;
			border-bottom: 1px solid #e4e4e4;
			margin-bottom: 30rpx;
			color: #000;
		}
		.placeholderClass {
			color: #e0e0e0;
		}
	}
	.content {
		.myEdit {
			height: calc(100vh - 500rpx);
			margin-bottom: 30rpx;
		}
	}
	.tools {
		width: 100%;
		height: 80rpx;
		background: #fff;
		border-top: 1rpx solid #f4f4f4;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.iconfont {
			font-size: 36rpx;
			color: #333;
			// 选择按钮的高亮
			&.active {
				color: #0199fe;
			}
		}
	}
}
</style>